<template>
  <div class="min-h-screen bg-gradient-to-br">

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-8">
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">

        <!-- 左侧区域 (30%) -->
        <div class="lg:col-span-3 space-y-6">

          <!-- 广告位轮播 -->
          <AdCarousel />

          <!-- 活动日历 -->
          <EventCalendar />
        </div>

        <!-- 中间区域 (50%) -->
        <div class="lg:col-span-7 space-y-6">

          <!-- 社区信息总览卡片 -->
          <CommunityOverview />
        </div>

        <!-- 右侧区域 (20%) -->
        <div class="lg:col-span-2 space-y-6">
          <!-- 社区热度排行榜 -->
          <CommunityRanking />
        </div>

      </div>
    </main>

  </div>
</template>

<script>
import AdCarousel from "@/components/AdCarousel.vue";
import EventCalendar from "@/components/EventCalendar.vue";
import ParticipatingCommunities from "@/components/ParticipatingCommunities.vue";
import CommunityOverview from "@/components/CommunityOverview.vue";
import CommunityRanking from "@/components/CommunityRanking.vue";
import {mapState} from "vuex";

export default {
  name: "Community",
  components: { CommunityRanking, CommunityOverview, ParticipatingCommunities, EventCalendar, AdCarousel },
  data() {
    return {
      communityId: null
    };
  },
  computed: {
    ...mapState({
      currentUserId: state => state.userId
    })
  },
  created() {
    // 从路由参数中获取社区ID
    this.loadCommunityData();
  },
  watch: {
    // 监听路由参数变化，当用户切换社区时更新页面内容
    '$route.params.communityId': function () {
      this.loadCommunityData();
    }
  },
  methods: {
    // 加载社区数据
    loadCommunityData() {
      // 从路由参数中获取社区ID
      this.communityId = this.$route.params.communityId;
      console.log("加载社区ID:", this.communityId);

      // TODO: 在实际应用中，这里应该调用API获取社区数据
      // 例如: this.fetchCommunityData(this.communityId);
    }
  }
};
</script>

<style scoped>
/* 自定义样式 */

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f5f3ff;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #ddd6fe;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #c4b5fd;
}

/* 卡片过渡效果 */
.card-enter-active,
.card-leave-active {
  transition: all 0.3s ease;
}

.card-enter-from,
.card-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style>